<template>
  <div class="main-content" v-show="frameDia">
    <div class="title-content">
      <div>{{ SideForm.title }}详情弹窗</div>
      <div>
        <el-icon>
          <CloseBold @click="closeCard" />
        </el-icon>
      </div>
    </div>
    <div class="card-content">
      <div class="tag-content">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="User" name="first"></el-tab-pane>
          <el-tab-pane label="Config" name="second"></el-tab-pane>
          <el-tab-pane label="Role" name="third"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="der-content">
        <el-descriptions :column="1" border>
          <template v-if="SideForm.data">
            <template v-for="item in SideForm.data" :key="item">
              <el-descriptions-item :label="item.name">
                {{ item.value }}
              </el-descriptions-item>
            </template>
          </template>
          <el-descriptions-item label="Remarks">
            <el-tag>School</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, onBeforeMount } from "vue";
const frameDia = ref(false);
const SideForm = reactive({
  title: "默认属性",
  data: [],
  firstData: [
    { name: "Username", value: "kooriookami" },
    { name: "Telephone", value: "18100000000" },
    { name: "Place", value: "Suzhou" },
    {
      name: "Address",
      value:
        "No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province",
    },
  ],
  secondData: [
    { name: "Two", value: "jeeryd" },
    { name: "TWO PHONE", value: "1123021-2232" },
    { name: "TWO PLC", value: "SadnMefd" },
    { name: "TWO ARE", value: "NO.1020, WsXvdva.3adnasjdna41ca32a.sf" },
  ],
  thirdData: [
    { name: "Three", value: "MMMA" },
    { name: "SNCK", value: "NO.121661" },
  ],
});
const activeName = ref("first");
const openCard = () => {
  frameDia.value = true;
};
const closeCard = () => {
  frameDia.value = false;
  activeName.value = "first";
  SideForm.data = SideForm.firstData;
};
onBeforeMount(() => {
  if (activeName.value == "first") {
    SideForm.data = SideForm.firstData;
  }
});
const handleClick = (tab) => {
  if (tab) {
    switch (tab.props.name) {
      case "first":
        SideForm.data = SideForm.firstData;
        break;
      case "second":
        SideForm.data = SideForm.secondData;
        break;
      case "third":
        SideForm.data = SideForm.thirdData;
        break;
    }
  }
};

defineExpose({
  frameDia,
  SideForm,
  openCard,
  closeCard,
  handleClick,
});
</script>

<style scoped lang="scss">
.main-content {
  width: 400px;
  height: calc(100% - 20px);
  background-color: rgb(241, 241, 241);
  border-radius: 5px;
  position: absolute;
  padding: 8px;
  right: 10px;
  top: 10px;
  box-sizing: border-box;
  .title-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-content: center;
    :deep(.el-icon) {
      width: 1em !important;
      height: 1em !important;
    }
    margin-bottom: 10px;
  }
  .card-content {
    .tag-content {
      :deep(.el-tabs__nav-wrap::after) {
        height: 0px;
      }
    }
    .der-content {
      :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
        background-color: #fff;
      }
    }
  }
}
</style>
